<template>
    <div>
        <!-- 顶部 -->
        <NavTopBar class="nav-top-bar" :placeholder="true">
            <template #left>
                <van-icon name="arrow-left" @click="$router.back()" />
            </template>
            <template #title>
                <div class="serch">
                    <van-icon name="search" />
                    <span class="serch-title">走过路过不要错过</span>
                </div>
            </template>
        </NavTopBar>
        <van-sidebar v-model="active">
            <van-sidebar-item
                v-for="item of list"
                :key="item.categoryId"
                :title="item.categoryName"
            />
        </van-sidebar>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import baseHook from "./hook/base";
import NavTopBar from "../Home/component/NavTopbar.vue";
export default defineComponent({
    components: { NavTopBar },
    setup() {
        const { active, list } = baseHook();
        return { active, list };
    },
});
</script>

<style lang="scss" scoped>
.nav-top-bar {
    :deep .van-nav-bar__right {
        i,
        span,
        a {
            color: #1baeae;
        }
    }
    .app-name {
        color: #1baeae;
        font-size: 20px;
        font-weight: bold;
        border-right: 1px solid #000;
        display: inline-block;
        padding-right: 10px;
    }
    .van-nav-bar__title {
        padding: 2px 0;
    }
    .serch {
        flex: 1;
        background: #f7f7f7;
        border-radius: 25px;
        text-align: left;
        padding: 0 20px;
        display: flex;
        align-items: center;
        height: 100%;
    }
    .serch-title {
        font-size: 14px;
        display: inline-block;
        padding: 0 16px;
        color: #666;
    }
}
</style>
